<template>
	<view class="content">
		<view class="tabs topTab">
			<view class="item" :class="{active: activeflag==0}" @click="tabSwitch(0)">已预约</view>

			<view class="item" :class="{active: activeflag==1}" @click="tabSwitch(1)">已签到</view>

			<view class="item" :class="{active: activeflag==2}" @click="tabSwitch(2)">已取消</view>
		</view>
		<scroll-view class="scroll-view" scroll-y :style="{ height: scrollHeight + 'px' }" @scrolltolower="loadmore">
			<view class="dataList">
				<view class="item" v-for="item in appointmentList">
					<view class="name">
						{{item.studentName}}
						<view class="status" v-show="tabFlag == 1">
							<view class="type">已签到</view>
							<image src="../../../static/appointment/yes_checked.png" mode="widthFix" />
						</view>
						<view class="status" v-show="tabFlag == 2">
							<view class="type">已取消</view>
							<image src="../../../static/appointment/no_checked.png" mode="widthFix" />
						</view>
						<view class="btn" @click="handleCancel(item.scdId, item.courseWeekEn, item.startTime)"
							v-show="tabFlag == 0">取消</view>
					</view>
					<view class="text">
						<view>上课时间</view>
						<view>{{item.courseTimeDesc}} {{item.startTime}}</view>
					</view>
					<view class="text">
						<view v-if="activeflag == 2">取消时间</view>
						<view v-else>预约时间</view>
						<view>{{item.createTime}}</view>
					</view>
					<view class="text">
						<view>预约课程</view>
						<view>{{item.courseName}}</view>
					</view>
					<view class="text">
						<view>上课场地</view>
						<view>{{item.courseAddress}}</view>
					</view>
				</view>
				<uni-load-more :status="status"  :content-text="contentText" />
			</view>
			<hint ref="hint"></hint>
		</scroll-view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		data() {
			return {
				scrollHeight: 1000,
				tabFlag: 0,
				activeflag: 0,
				appointmentList: [],
				status: 'more',
				page:1,
				pagesize:10,
				isLoadMore:false, //是否加载中
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的~'
				},
			};
		},
		mounted() {
			this.getAppointmentList();
			// this.$refs.hint.setStatus('noData');
		},
		onPullDownRefresh() {
			//alert('dfsd111')
			this.getAppointmentList();
		},
		methods: {
			loadmore: function(e) {
			            //console.log(e)
						//alert('dfsd')
						if(!this.isLoadMore){  //此处判断，上锁，防止重复请求
						    this.status = 'more';
							this.page+=1
						    this.getAppointmentList();
						}
			        },
			/* setHeight(data) {
				this.$sys.getBoundingClientRect('.topTab').then(e => {
					this.scrollHeight = data - e.height;
				});
			}, */
			tabSwitch(tabFlag) {
				this.tabFlag = tabFlag
				this.activeflag = tabFlag
				this.appointmentList = []
				this.getAppointmentList()
			},
			handleCancel(id, courseWeekEn, startTime) {
				/* 判断有没有少于半个小时 */
				let date = new Date()
				let cdate = date
				let weekIndex = date.getDay()
				let cweekIndex = this.weekEn2Num(courseWeekEn)
				cdate.setDate(cdate.getDate() + (cweekIndex - weekIndex))
				let startTimeArry = startTime.split(":")
				cdate = new Date(cdate.getFullYear(), cdate.getMonth(), cdate.getDate(), startTimeArry[0], startTimeArry[
					1], '00')
				/* if ((cdate.getTime() - date.getTime()) < 30 * 1000) {
					this.$sys.showToast({
						title: '课程取消需提前半小时'
					});
				} else { */
					let that = this
					uni.request({
						url: this.websiteUrl + 'app/haveappointment/cancelappointment?id=' + id,
						method: 'GET',
						data: {},
						success: function(res) {
							if (res.data.code == 0) {
								that.$sys.showToast({
									title: '取消成功！'
								});
								that.appointmentList = [];
								that.getAppointmentList()
							} else {
								that.$sys.showToast({
									title: res.data.msg
								});
							}
						}
					});
				//}
			},
			weekEn2Num(courseWeekEn) {
				switch (courseWeekEn) {
					case 'Mon':
						return 1;
					case 'Tue':
						return 2;
					case 'Wed':
						return 3;
					case 'Thu':
						return 4;
					case 'Fri':
						return 5;
					case 'Sat':
						return 6;
					case 'Sun':
						return 7;
				}
			},
		
			//方法:用来提取code
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1]
								.replace(/\+/g, '%20')) || null
			},
			
			getAppointmentList() {
				let that = this
				const parent = uni.getStorageSync('parent');
				if(!parent){
					uni.navigateTo({
						url: '/pages/my/login/login?bid=' + getUrlCode("bid")
					}) 
				}
				this.status = 'loading';
				uni.request({
					url: this.websiteUrl + 'app/haveappointment/studenthasappointment',
					method: 'POST',
					data: {
						status: that.tabFlag,
						page: that.page,
						limit: that.pagesize,
						parentId: parent.id
						//parentId: uni.getStorage('userId')
					},
					success: function(res) {
						if (res.data.code == 0) {
							that.appointmentList = that.appointmentList.concat(res.data.page.list)
							//console.log(that.appointmentList);
							if(res.data.page.list.length <= 0){
								that.status = 'nomore';
							}else{
								that.status = 'more';
							}
							this.isLoadMore=true
						} else {
							that.$sys.showToast({
								title: res.data.msg
							});
							this.isLoadMore=false
							that.status = 'more';
						}
					}
				});

				// 中断请求任务
				//requestTask.abort();
			}
		}
	};
</script>

<style lang="scss">
	.content {
		padding: 0px;
	}

	.tabs {
		@extend .flex-space-between-center;
		padding-top: $base-interval;

		.item {
			width: 30%;
			text-align: center;
			padding-bottom: $sm-interval;
			position: relative;

			&:after {
				position: absolute;
				content: '';
				left: 50%;
				width: 40rpx;
				margin-left: -20rpx;
				bottom: 0px;
				height: 4rpx;
				border-radius: 2rpx;
			}
		}

		.active {
			color: $main-color;

			&:after {
				background-color: $main-color;
			}
		}
	}

	.scroll-view {
		background: #f8f9f9;

		.dataList {
			padding: $base-interval;

			.item {
				background-color: $bg-color-white;
				border-radius: $border-radius-base;
				padding: $base-interval;
				margin-bottom: $base-interval;

				&:last-child {
					margin-bottom: 0px;
				}

				.name {
					@extend .flex-space-between-center;
					font-size: $font-size-lg;
					font-weight: 600;
					margin-bottom: 20rpx;
					position: relative;

					.status {
						position: absolute;
						right: -5+-1 * $base-interval;
						top: 0px;

						image {
							width: 96rpx;
						}

						.type {
							position: absolute;
							left: 0px;
							top: 0px;
							width: 100%;
							height: 100%;
							font-size: $font-size-sm;
							text-align: center;
							color: $text-color-white;
							z-index: 3;
							font-weight: 500;
							line-height: 50rpx;
						}
					}

					.btn {
						width: 98rpx;
						line-height: 48rpx;
						color: $text-color-white;
						background: #20c6ba;
						text-align: center;
						border-radius: 4rpx;
						font-size: $font-size-sm;
					}
				}

				.text {
					margin-top: 10rpx;
					@extend .flex-space-between-center;
					font-size: $font-size-sm;
					color: $text-color-nine;
				}
			}
		}
	}
</style>
